<template>
	<div :is="cardWrap ? 'el-card' : 'div'" class="table-search">
		<el-form :model="formValue" ref="formRef" :rules="rules" v-bind="{ ...elformAttrs, ...$attrs }">
			<div class="form-container">
				<div class="form-row">
					<div class="form-row-left">
						<el-form-item v-for="(item, index) in formItem" :key="index" :label="item.label">
							<el-input
								v-if="item.type == 'input'"
								v-model="formValue[item.key]"
								v-bind="{ ...item.otherAttrs }"
								v-on="{ ...item.slotListeners }"
							>
								<template v-if="(item.slot || false).type == 'text'" :slot="item.slot.slot">
									{{ item.slot.content }}
								</template>
								<el-button
									v-else-if="(item.slot || false).type == 'button'"
									:slot="item.slot.slot"
									:icon="item.slot.icon"
									@click="item.slot.btnClick(formValue[item.key])"
								></el-button>
							</el-input>

							<el-date-picker
								v-else-if="item.type == 'datePick'"
								v-model="formValue[item.key]"
								:value-format="item.otherAttrs.valueFormat || 'timestamp'"
								v-bind="{ ...item.otherAttrs }"
								v-on="{ ...item.slotListeners }"
							/>

							<el-select
								v-else-if="item.type == 'select'"
								v-model="formValue[item.key]"
								v-bind="{ ...item.otherAttrs }"
								v-on="{ ...item.slotListeners }"
							>
								<el-option
									v-for="(s, i) in item.options"
									:key="i"
									:label="s.value"
									:value="s.key"
									v-bind="{ ...s }"
								>
									<span v-if="item.otherAttrs.custom" style="float: left">{{ s.value }}</span>
									<span
										v-if="item.otherAttrs.custom"
										style="float: right; color: #8492a6; font-size: 13px"
										>{{ s.key }}</span
									>
								</el-option>
							</el-select>

							<el-cascader
								v-else-if="item.type == 'cascader'"
								v-model="formValue[item.key]"
								:options="item.options"
								v-bind="{ ...item.otherAttrs }"
								v-on="{ ...item.slotListeners }"
							></el-cascader>

							<el-radio-group
								v-else-if="item.type == 'radioGroup'"
								v-model="formValue[item.key]"
								v-bind="{ ...item.otherAttrs }"
								v-on="{ ...item.slotListeners }"
								class="search"
							>
								<el-radio v-for="(item, i) in item.radios" :key="i" :label="item.label" border>
									{{ item.name }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item>
							<el-button class="search" type="primary" @click="handleSubmit">搜索</el-button>
							<el-button v-if="visibleReset" @click="handleReset">重置</el-button>
						</el-form-item>
					</div>
				</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'tableSearch',
		props: {
			cardWrap: {
				type: Boolean,
				default: true
			},
			visibleReset: {
				type: Boolean,
				default: true
			},
			formItem: {
				type: Array,
				default: () => []
			},
			onSubmit: {
				type: Function,
				default: () => {}
			},
			onReset: {
				type: Function,
				default: () => {}
			}
		},
		data() {
			return {
				formValue: {},
				rules: {},
				elformAttrs: {
					// 默认的
					labelWidth: '100px',
					inline: true,
					size: 'small'
					// labelPosition: "right"
				}
			}
		},
		mounted() {
			this.initFormValue()
		},
		methods: {
			formatFormData(_submitData) {
				const result = {}
				Object.keys(_submitData).forEach(e => {
					const currentRender = this.$props.formItem.find(ee => ee.key === e)
					if (currentRender && currentRender.subKey) {
						currentRender.subKey.forEach((eee, iii) => {
							// const currentSub = _submitData[e] || []
							result[eee] = currentRender[iii]
						})
					} else {
						result[e] = _submitData[e]
					}
				})
				return result
			},
			handleSubmit() {
				this.$refs.formRef.validate(success => {
					const data = this.formatFormData(this.$data.formValue)
					// 1.success 表单验证成功，
					// 2.this.onSubmit 判断是否存在的
					// 3.this.onSubmit(data) 最后才是提交的
					success && this.onSubmit && this.onSubmit(data) // 不会报错
				})
			},
			handleReset() {
				this.$refs.formRef.resetFields()
				this.initFormValue()
				this.onReset && this.onReset(this.formValue)
			},
			initFormValue() {
				const formData = {}
				this.formItem.forEach(e => {
					if (e.type == 'radioGroup') {
						formData[e.key] = e.radios[0].label
					} else {
						formData[e.key] = null
					}
				})
				this.formValue = formData
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index';
</style>
